<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;" v-if="false">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="脱敏脱密名称">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入脱敏脱密名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;display: none;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新增</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <ykhttb
        width="250"
        ref="httbRef"
        :btn-is-show="btnIsShow"
        :table-col="tabUserList"
        :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData"
        @refresh="getUserList"
      />
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog :close-on-click-modal="false" :title="title" width="30%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm autoClass">
          <el-form-item label="集群名称" prop="clusterName">
            <el-input v-model="ruleForm['clusterName']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="Zookeeper地址" prop="zkpAddress">
            <el-input v-model="ruleForm['zkpAddress']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="Broker" prop="broker">
            <el-input v-model="ruleForm['broker']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="版本" prop="kafkaVersion">
            <el-input v-model="ruleForm['kafkaVersion']" :disabled="disFlag" clearable placeholder="" />
          </el-form-item>
        </el-form>
        <div v-if="!disFlag" style="text-align: center;">
          <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
          <el-button @click="resetForm('return')">返回</el-button>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>
  import { desensitizationapplygetList,desensitizationapplybindApply, clustersavaClusterInfo, clusterupdateClusterInfo, clusterdelete } from '@/api/zt/index'
  import experiment from '@/mixins/experiment'
import request from '@/utils/request'
  export default {
    components: {
    },
    mixins: [experiment],
    data() {
      return {
        btnIsShow: {
          operate: false,
          detile: true,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {},
        dialogTableVisible: false,
        ruleForm: {
          'clusterName': '本地kafka',
          'zkpAddress': '192.168.2.151:2181',
          'broker': '192.168.2.151:9092',
          'kafkaVersion': '2.18'
        },
        userId: '',
        formInline: {
          'dataModelName': ''
        },
        tableUserData: [],
        tabUserList: [
           {
            key: 'orgiData',
            title: '原始数据'
          },
           {
            key: 'remark',
            title: '规则'
          },
          {
            key: 'nowData',
            title: '脱密数据'
          },
          {
            key: 'createTime',
            title: '创建时间'
          }
          // {
          //   key: 'desensitizationName',
          //   title: '脱敏脱密名称'
          // },
          // {
          //   key: 'dataModelName',
          //   title: '应用数据模型'
          // },
          // {
          //   key: 'fieldName',
          //   title: '应用字段'
          // },
          // {
          //   key: 'createTime',
          //   title: '创建时间'
          // },
          // {
          //   key: 'updateTime',
          //   title: '更新时间'
          // }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {

    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
      deleteSelectData(v) {
        clusterdelete({ id: v.id }).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
      handleNodeClick(data) { },
      commitFromData() {
        if (this.ruleForm.hasOwnProperty('id')) {
          clusterupdateClusterInfo(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        } else {
          clustersavaClusterInfo(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        }
      },
      handleSizeChange(v) {
        this.page = 1
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },

      // 获取用户列表
      getUserList() {
        request({
                url: `/ht-datacenter/WordRequestLog/page?current=${this.page}&size=${this.size}`,
                method: 'get',
            }).then(res => {
                if (res.code == 200) {
                    this.tableUserData = res.data.records
                    this.total = Number(res.data.total)
                }
            })


        // this.dialogTableVisible = false
        // this.$refs.httbRef.isShowLoading(true)
        // desensitizationapplygetList({
        //   'pageIndex': this.page,
        //   'pageSize': this.size,
        //   'desensitizationName': this.formInline.dataModelName
        // }).then(res => {
        //   this.tableUserData = res.data.records
        //   this.total = res.data.total
        //   this.$refs.httbRef.isShowLoading(false)
        // })
      }
    }
  }
  </script>

        <style lang="scss" scoped>
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }

        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .el-form{
          // display: flex;
          // flex-direction: row;
          // flex-wrap: wrap;
        }
        .el-form-item{
          // width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
